<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>收集信息字段</title>
    <link href="<%=path%>/hplus/css/plugins/footable/footable.core.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/dataTables/css/jquery.dataTables.min.css"/>
</head>

<style>
      table.dataTable tbody th, table.dataTable tbody td{
         padding: 5px 10px 0px 10px;
      } 
</style>
<body>
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="container-fluid">
		<div class="row">
		    <div class="col-md-12 text-right">
			   <i class="fa fa-times" onclick="javascript:colseModalCollect()"></i>
			</div>
		     <div class="col-sm-12">
		        <p>搜集信息字段（建议不超过三项，否则会影响转化）</p>
		     </div>
			 <div class="col-sm-12" style="margin-top:20px;">
                <div class="ibox float-e-margins">
                    <div class="table-responsive">
                        <table class="display  table-striped table-bordered table-hover" style="width: 100%;" id="mydataTable">
                            <thead>
                                <tr>
                                   <th>序号</th>
                                   <th style="padding: 0px 10px 0px 10px">
                                      <div class="checkbox i-checks"><label class="collectAll"><input  type="checkbox"></label> 字段名称</div>
                                   </th>
                                   <th>字段要求</th>
                                </tr>
                            </thead>
                            <tbody style="font-size:14px">
                                <tr class="trParent">
                                   <td>1</td>
                                   <td>
                                      <div class="checkbox i-checks"><label ><input value="nameRadio" class="clickCheckBox" checked disabled="disabled" type="checkbox" ></label> 姓名</div>
                                   </td>
                                   <td>
                                       <div class="radio i-checks col-sm-2">
				                            <label class="operation" >
				                                <input  type="radio"  name="nameRadio" value="0" disabled="disabled"> <i></i>选填</label>
				                        </div>
				                        <div class="radio i-checks col-sm-3" style="margin-top:10px">
				                            <label class="operation">
				                                <input  type="radio"  name="nameRadio" value="1" checked > <i></i>必填</label>
				                        </div>
                                   </td>
                                </tr>
                                <tr>
                                   <td>2</td>
                                   <td>
                                      <div class="checkbox i-checks"><label ><input value="phoneRadio" checked disabled="disabled"  class="clickCheckBox" type="checkbox" ></label> 手机</div>
                                   </td>
                                   <td>
                                       <div class="radio i-checks col-sm-2">
				                            <label class="operation">
				                                <input  type="radio"  name="phoneRadio" value="0" disabled="disabled"> <i></i>选填</label>
				                        </div>
				                        <div class="radio i-checks col-sm-2" style="margin-top:10px">
				                            <label class="operation">
				                                <input  type="radio"  name="phoneRadio" value="1" checked> <i></i>必填</label>
				                        </div>
				                        <div class="col-sm-1 swtichPhone" style="width: 6.333333%;">
					                      <input type="checkbox" class="js-switch_1"/>	
                                        </div>
                                        <span class="col-sm-6" style="margin-left:22px;margin-top:6px;color:#999">点击左侧开关，开启短信验证收集号码功能</span>
                                   </td>
                                </tr>
                                <tr> 
                                   <td>3</td>
                                   <td>
                                      <div class="checkbox i-checks"><label ><input value="emailRadio" id="emailCheckBox" class="clickCheckBox" type="checkbox" ></label> 邮箱</div>
                                   </td>
                                   <td>
                                       <div class="radio i-checks col-sm-2">
				                            <label class="operation">
				                                <input  type="radio" id="optionalEmailRadio" name="emailRadio" value="0" checked> <i></i>选填</label>
				                        </div>
				                        <div class="radio i-checks col-sm-2" style="margin-top:10px">
				                            <label class="operation">
				                                <input  type="radio" id="mustEmailRadio" name="emailRadio" value="1"> <i></i>必填</label>
				                        </div>
				                        <div class="col-sm-1 switchEmail" style="width: 6.333333%;">
					                      <input type="checkbox" class="js-switch_2"/>
					                    </div>
					                    <span class="col-sm-6" style="margin-left:22px;margin-top:6px;color:#999">点击左侧开关，开启验证邮箱功能</span>
                                   </td>
                                </tr>
                                <tr>
                                   <td>4</td>
                                   <td>
                                      <div class="checkbox i-checks"><label ><input value="companyRadio" id="companyCheckBox" class="clickCheckBox" type="checkbox" ></label> 公司</div>
                                   </td>
                                   <td>
                                       <div class="radio i-checks col-sm-2">
				                            <label class="operation">
				                                <input  type="radio" id="optionalCompanyRadio" name="companyRadio" value="0" checked> <i></i>选填</label>
				                        </div>
				                        <div class="radio i-checks col-sm-3" style="margin-top:10px">
				                            <label class="operation">
				                                <input  type="radio" id="mustCompanyRadio" name="companyRadio" value="1"> <i></i>必填</label>
				                        </div>
                                   </td>
                                </tr>
                                <tr>
                                   <td>5</td>
                                   <td>
                                      <div class="checkbox i-checks"><label ><input value="jobRadio" id="jobCheckBox" class="clickCheckBox" type="checkbox" ></label> 职位</div>
                                   </td>
                                   <td>
                                       <div class="radio i-checks col-sm-2">
				                            <label class="operation">
				                                <input  type="radio" id="optionalJobRadio" name="jobRadio" value="0" checked> <i></i>选填</label>
				                        </div>
				                        <div class="radio i-checks col-sm-3" style="margin-top:10px">
				                            <label class="operation">
				                                <input  type="radio" id="mustJobRadio" name="jobRadio" value="1"> <i></i>必填</label>
				                        </div>
                                   </td>
                                </tr>
                                
                            </tbody>
                        </table>
                    </div>                 
                </div>
            </div>
            <div class="col-md-12 text-center" style="width:100%;">
		        <div class="col-md-3"></div>
		        <button type="button" onclick="javascript:colseModalCollect();" class="col-md-2 btn btn-w-m btn-outline btn-primary">取消</button> 
		        <div class="col-md-2"></div>
			    <button type="button" onclick="javascript:determineModalCollect();" class="col-md-2 btn btn-w-m btn-primary">确定</button> 
			    <div class="col-md-3"></div>
		    </div>
	    </div>			
	</div>
</div>
  
    <div class="modal inmodal fade" id="couponStatistics" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
               
            </div>
        </div>
    </div>

	
    <script type="text/javascript" src="<%=path%>/hplus/js/plugins/dataTables/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/marketing/dialog.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/lengthlimit.js"></script>
	<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script type="text/javascript">
$('.collectAll').on('ifChecked', function(event){
	$(".clickCheckBox").attr("checked","checked"); 
	$(".clickCheckBox").parent().addClass("checked");
	
});
$('.collectAll').on('ifUnchecked', function(event){
	$(".clickCheckBox").removeAttr("checked","checked"); 
	$(".clickCheckBox").parent().removeClass("checked");
});


$(document).on('click', '.swtichPhone', function() {
	 if(isNeedVerifyPhone==1){
		 isNeedVerifyPhone=0;
	 }else{
		 isNeedVerifyPhone=1;
	 }
});
$(document).on('click', '.switchEmail', function() {
	 if(isNeedVerifyEmail==1){
		 isNeedVerifyEmail=0;
	 }else{
		 isNeedVerifyEmail=1;
	 }
});
</script>

<script type="text/javascript">
var isNeedVerifyPhone=1;
var isNeedVerifyEmail=0;
var path = "<%=path%>";
$.fn.dataTable.ext.errMode = 'none';
var phoneSwitchery;
var emailSwitchery;
var myDataTable;
	    $(function(){
	    	init();
	    });
	    
	    function init(){
	    	 phoneSwitchery=new Switchery(document.querySelector(".js-switch_1"),{
	            color: "#1AB394"
	        });
	    	 setSwitchery(phoneSwitchery, true);
	    	 emailSwitchery=new Switchery(document.querySelector(".js-switch_2"),{
	            color: "#1AB394"
	        });
	    	myDataTable = dataTable();
/* 	    	var i = document.querySelector(".js-switch_1"),
	        t = (new Switchery(i, {
	            color: "#1AB394"
	        }), document.querySelector(".js-switch_2")),
	        a = (new Switchery(t, {
	            color: "#1AB394"
	        })); */
	    	
	    	
	    };
	    
	    function dataTable(){
	    	return $('#mydataTable').DataTable({
	    		processing: true,
	    		ordering: false,
	    		searching: false,
	    		info: true,
	    		autoWidth: true,
	    		lengthChange: false,
	    		"order": [[ 2, "desc" ]],
	    	    language: {
	    	    	emptyTable: '无数据',
	    	    	info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
	    			infoEmpty: '没有数据',
	    			lengthMenu: '每页显示 _MENU_ 条记录',
	    			loadingRecords: '正在加载数据....',
	    			processing: '正在处理数据....',
	    			zeroRecords: '没有找到匹配的记录',
	    			paginate: {
	    				first: '首页',
	    				previous: '前页',
	    				next: '后页',
	    				last: '尾页'
	    			}
	    	    },
	    	    order: [[1,'desc']],
	    		pageLength: 5,
	    	    pagingType: 'full_numbers',
	    	    "initComplete": function(settings, json) {
	    	    	$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
	    	    	initData(); 
	    	    }
	    	}).on( 'draw', function () {
	    		$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});

	    	} );
	    	
	    };
	    
	    
	    function initData(){
	    	for(var i in fieldIdArray){
	    		var fieldName = fieldIdArray[i].fieldName;
	    		var required = fieldIdArray[i].required;
	    		var needVerify = fieldIdArray[i].needVerify;
	    		switch (fieldName) {
				case "手机":
					if(needVerify==1){
						setSwitchery(phoneSwitchery, true);
					}else{
						setSwitchery(phoneSwitchery, false);
					}
					isNeedVerifyPhone = needVerify;
					break;
				case "邮箱":
					isNeedVerifyEmail = needVerify;
					if(needVerify==1){
						setSwitchery(emailSwitchery, true);
					}
					if(required == 1){
			    		$('#optionalEmailRadio').removeAttr("checked");
			    		$('#optionalEmailRadio').parent().removeClass("checked");
			    		$('#mustEmailRadio').attr("checked","checked");
			    		$('#mustEmailRadio').parent().addClass("checked");
			    	}else {
			    		$('#mustEmailRadio').removeAttr("checked");
			    		$('#mustEmailRadio').parent().removeClass("checked");
			    		$('#optionalEmailRadio').attr("checked","checked");
			    		$('#optionalEmailRadio').parent().addClass("checked");
			    	}
					$('#emailCheckBox').attr("checked","checked"); 
					$('#emailCheckBox').parent().addClass("checked");
					break;
				case "公司":
					if(required == 1){
			    		$('#optionalCompanyRadio').removeAttr("checked");
			    		$('#optionalCompanyRadio').parent().removeClass("checked");
			    		$('#mustCompanyRadio').attr("checked","checked");
			    		$('#mustCompanyRadio').parent().addClass("checked");
			    	}else {
			    		$('#mustCompanyRadio').removeAttr("checked");
			    		$('#mustCompanyRadio').parent().removeClass("checked");
			    		$('#optionalCompanyRadio').attr("checked","checked");
			    		$('#optionalCompanyRadio').parent().addClass("checked");
			    	}
					$('#companyCheckBox').attr("checked","checked"); 
					$('#companyCheckBox').parent().addClass("checked");
					break;
				case "职位":
					if(required == 1){
			    		$('#optionalJobRadio').removeAttr("checked");
			    		$('#optionalJobRadio').parent().removeClass("checked");
			    		$('#mustJobRadio').attr("checked","checked");
			    		$('#mustJobRadio').parent().addClass("checked");
			    	}else {
			    		$('#mustJobRadio').removeAttr("checked");
			    		$('#mustJobRadio').parent().removeClass("checked");
			    		$('#optionalJobRadio').attr("checked","checked");
			    		$('#optionalJobRadio').parent().addClass("checked");
			    	}
					$('#jobCheckBox').attr("checked","checked"); 
					$('#jobCheckBox').parent().addClass("checked");
					break;

				default:
					break;
				}
	    	}
	    }
	    
	    
	    
	    
		     
	     //判断是否被选中
	     function IsCheck(id){
	    	 var result=false;
    		 for(var i in couponIdArray){
	    		 if(couponIdArray[i]==id){
	    			 result=true;
	    			 break; 
	    		 }
	    	 }
	    	 return result;
	     };

function determineModalCollect(){
	fieldIdArray.length=0;
	var html='<span class="s-label-info">姓名<span style="color:#ddd;">(必填)</span></span><span class="s-label-info">手机<span style="color:#ddd;">(必填)</span></span>';
	var index = 0;
	$(".clickCheckBox").each(function(){
		if($(this).parent().hasClass("checked")){
			console.log("--------------------->");
	    	var type= $(this).val();
	    	var collectObj=new Object();
	    	collectObj.fieldName=getFieldName(type);
	    	collectObj.required=$("input[name='"+type+"']:checked").val();
	    	if(type == "phoneRadio"){
	    		collectObj.needVerify=isNeedVerifyPhone;
	    	}else if(type == "emailRadio"){
	    		collectObj.needVerify=isNeedVerifyEmail;
	    		html += '<span class="s-label-info">'+getFieldName(type)+'<span class="deleteCollect" index="'+index+'" style="cursor: pointer;"> ×</span></span>';
	    	}else if(type == "nameRadio"){
	    	}else{
	    		html += '<span class="s-label-info">'+getFieldName(type)+'<span class="deleteCollect" index="'+index+'" style="cursor: pointer;"> ×</span></span>';
	    	}
	    	fieldIdArray.push(collectObj);
	    	index++;
	    }
	});
	console.log("html----->"+html);
	$('#collectList').html(html);
	$('#modalCollectInfo').modal('hide');
}
function getFieldName(type){
	var fieldName="";
	switch (type) {
	case "nameRadio":
		fieldName="姓名";
		break;
	case "phoneRadio":
		fieldName="手机";
		break;
	case "emailRadio":
		fieldName="邮箱";
		break;
	case "companyRadio":
		fieldName="公司";
		break;
	case "jobRadio":
		fieldName="职位";
		break;

	default:
		break;
	}
	return  fieldName;
}
</script>


</body>
</html>